<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>集散中心-实时物流情况</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1031373_7dlwku3mymg.css">
  <link rel="stylesheet" href="src/css/visualStyle.css">
</head>

<body>
  <div id="app">
    <div class="visual-wrapper">
      <h2 class="visual-big-tit">{{ city }}医药集散中心实时物流情况</h2>
      <div class="visual-container displayflex">
        <div class="realtimeLogistics-l">
          <div class="h280 margin-b20 displayflex">
            <div class="w820 bg-part">
              <div class="visual-small-tit blue">处理中订单分部一览</div>
              <div id="ProcessingOrderBar" class="chart-box"></div>
              <div class="bg-part2"></div>
            </div>
            <div class="w540 bg-part">
              <div class="visual-small-tit blue">配送时长占比</div>
              <div id="DeliveryTimePie" class="chart-box"></div>
              <div class="bg-part2"></div>
            </div>
          </div>
          <div class="h280 margin-b20 displayflex">
            <div class="w540 bg-part">
              <div class="visual-small-tit blue">出入库动态一览</div>
              <div id="InOutDynamicsBar" class="chart-box"></div>
              <div class="bg-part2"></div>
            </div>
            <div class="w820 bg-part">
              <div class="visual-small-tit blue">吞吐状况一览</div>
              <div id="HuffConditionLine" class="chart-box"></div>
              <div class="bg-part2"></div>
            </div>
          </div>
          <div class="w1380 h280 bg-part">
            <div class="visual-small-tit blue">异常信息明细</div>

            <Tabs class="abnormal-item tab-title" :value="tabsnumber" @on-click="getTrunkData">
              <tab-pane label="全部异常" name="1">
                <div v-if="allAbnormal.length > 0" class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in allAbnormal" :key="index">
                      <div class="abnormal-row" :class="typeClass(item.type)">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">
                          <span v-if="item.time < 24">【新】</span>
                          {{ item.warehouse }}
                        </p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="no-abnormal-item">
                  <img src="src/images/no-abnormal.png" alt>
                </div>
              </tab-pane>
              <tab-pane label="冷冻仓库异常" icon="ios-disc" name="2">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in freezing" :key="index">
                      <div class="abnormal-row typeClass1" v-if="item.type == '冷冻仓异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
              <tab-pane label="冷藏仓库异常" name="3">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in refrigeration" :key="index">
                      <div class="abnormal-row typeClass2" v-if="item.type == '冷藏仓异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
              <tab-pane label="温度异常" name="4">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in temperature" :key="index">
                      <div class="abnormal-row typeClass3" v-if="item.type == '在途温度异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
              <tab-pane label="阴凉异常" name="5">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in cool" :key="index">
                      <div class="abnormal-row typeClass4" v-if="item.type == '阴凉异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
              <tab-pane label="订单异常" name="6">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in order" :key="index">
                      <div class="abnormal-row typeClass5" v-if="item.type == '订单异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
              <tab-pane label="设备异常" name="7">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in device" :key="index">
                      <div class="abnormal-row typeClass6" v-if="item.type == '设备异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
              <tab-pane label="接口异常" name="8">
                <div class="swiper-container abnormal-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in interface" :key="index">
                      <div class="abnormal-row typeClass7" v-if="item.type == '接口异常'">
                        <p class="abnormal-type">{{ item.type }}</p>
                        <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                        <p class="abnormal-details">{{ item.detail }}</p>
                        <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-pane>
            </Tabs>

            <div class="bg-part2"></div>
          </div>
        </div>
        <div class="realtimeLogistics-r">
          <div class="h280 bg-part margin-b20">
            <div class="visual-small-tit blue">回单情况</div>
            <div id="ReturnOrderBar" class="chart-box"></div>
            <div class="bg-part2"></div>
          </div>
          <div class="h580 bg-part">
            <div class="visual-small-tit blue">服务质量KPI</div>
            <div id="KPIPie" class="chart-box"></div>
            <div class="bg-part2"></div>
          </div>
        </div>
      </div>
      <div class="visual-footer">Copyright © 2006-2015    深圳传世般若科技有限公司</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../src/js/echarts.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        city: "洛阳",
        barStyle: {
          grid: {
            top: '10%',
            left: '3%',
            right: '3%',
            bottom: '5%',
            containLabel: true
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: 'rgba(65, 207, 254, .15)',
            }
          },
          barWidth: window.screen.width > 1600 ? 30 : 20,
          lineColor: {
            lineStyle: {
              color: "rgba(65, 207, 254, .15)"
            }
          },
          GradientColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(106,210,253,1)'
            },
            {
              offset: 1,
              color: 'rgba(90, 99, 254, 1)'
            }
          ], false),
        },
        ProcessingOrderData: {
          name: ["待受理", "待调度", "待配送", "在途中", "待回单"],
          value: [16000, 14000, 53000, 10000, 70000]
        },
        InOutDynamicsData: {
          name: ["验收中", "上架中", "拣货中", "复核中"],
          value: [16000, 14000, 5300, 10000]
        },
        HuffConditionData: {
          name: ["发单量", "三方承运", "接单量", "自有承运"],
          fdl: [105, 100, 80, 50, 30, 40, 50, 70, 80, 70, 50, 30, 40, 50, 60, 70],
          sfcy: [65, 95, 90, 80, 70, 60, 50, 40, 30, 50, 80, 90, 100, 110, 90, 50],
          jdl: [40, 50, 60, 70, 80, 70, 60, 50, 40, 35, 30, 20, 10, 20, 30, 40],
          zycy: [20, 30, 40, 50, 60, 50, 40, 30, 20, 10, 30, 50, 70, 80, 90, 80]
        },
        ReturnOrderData: {
          month: ["9月", "10月", "11月"],
          valueTotal: [560, 603, 500],
          value: [500, 300, 350],
          valuePercent: [89, 49, 70]
        },
        DeliveryTimeData: [
          {name: "24小时内送达",value: 70},
          {name: "3日内送达",value: 15},
          {name: "5日内送达",value: 9},
          {name: "5日外送达",value: 6},
        ],
        WarehouseManageKPI: [
          { data: "准时送达率", value: 96 },
          { data: "差错退回率", value: 3 },
          { data: "包装完好率", value: 98 },
          { data: "破损率", value: 2 },
          { data: "货物提取准时率", value: 99 },
          { data: "运输过程可追溯率", value: 98 },
          { data: "客户投诉率", value: 1 },
          { data: "冷链温控合格率", value: 97 },
        ],
        tabsnumber: "1",
        allAbnormal: [],
        freezing: [],
        refrigeration: [],
        temperature: [],
        cool: [],
        order: [],
        device: [],
        interface: [],
        swiperLoaded: false
      },
      mounted() {
        this.getAllEcharts();
        this.getProcessingOrderBar();
        this.getDeliveryTimePie();
        this.getInOutDynamicsBar();
        this.getHuffConditionLine();
        this.getReturnOrderBar();
        this.getKPIPie();

        // 异常信息明细
        this.getTrunkData("1");

      },
      methods: {
        // 处理中订单分部一览 ProcessingOrderBar
        getProcessingOrderBar() {
          let ProcessingOrderBarChart = echarts.init(document.getElementById('ProcessingOrderBar'));
          let ProcessingOrderBarOption = {
            tooltip: {
              formatter: (x) => {
                return `${x.name}：${(x.value/10000).toFixed(1)}万件`
              },
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: this.ProcessingOrderData.name,
            }],
            yAxis: [{
              type: 'value',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              splitLine: false,
              axisLabel: {
                color: '#fff'
              }
            }],
            series: [{
              type: 'bar',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: this.barStyle.GradientColor,
                },
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: (x) => {
                  return `${(x.value/10000).toFixed(1)}万件`
                },
              },
              data: this.ProcessingOrderData.value
            }]
          };
          ProcessingOrderBarChart.setOption(ProcessingOrderBarOption, true);
          this.ProcessingOrderBarChart = ProcessingOrderBarChart;
        },

        // 配送时长占比 DeliveryTimePie
        getDeliveryTimePie() {
          let DeliveryTimePieChart = echarts.init(document.getElementById('DeliveryTimePie'));
          let fontSize = window.screen.width > 1600 ? 18 : 14;
          let DeliveryTimePieOption = {
            color: ['#5383ec', '#67dbff', '#ab85db', '#afdee4'],
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              right: '5%',
              y: 'center',
              itemGap: 15,
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: fontSize,
                color: '#fff'
              },
              data: ['24小时内送达', '3日内送达', '5日内送达', '5日外送达']
            },
            series: [{
              name: '配送时长占比',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.DeliveryTimeData,
              labelLine: {
                lineStyle: {
                  color: '#41cffe',
                  type: 'dashed'
                }
              },
              label: {
                fontSize: fontSize,
                color: '#fff',
                formatter: x => {
                  return `${x.value}%`
                }
              }
            }]
          };
          DeliveryTimePieChart.setOption(DeliveryTimePieOption, true);
          this.DeliveryTimePieChart = DeliveryTimePieChart;
        },

        // 出入库动态一览 InOutDynamicsBar
        getInOutDynamicsBar() {
          let InOutDynamicsBarChart = echarts.init(document.getElementById('InOutDynamicsBar'));
          let InOutDynamicsBarOption = {
            tooltip: {
              formatter: (x) => {
                 if(x.value > 10000) {
                  return `${x.name}：${(x.value/10000).toFixed(1)}万件`
                } else {
                  return `${x.name}：${x.value}件`
                }
              },
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: this.InOutDynamicsData.name,
            }],
            yAxis: [{
              type: 'value',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              splitLine: false,
              axisLabel: {
                color: '#fff'
              }
            }],
            series: [{
              type: 'bar',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: this.barStyle.GradientColor,
                },
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: (x) => {
                  if(x.value > 10000) {
                    return `${(x.value/10000).toFixed(1)}万件`
                  } else {
                    return `${x.value}件`
                  }
                },
              },
              data: this.InOutDynamicsData.value
            }]
          };
          InOutDynamicsBarChart.setOption(InOutDynamicsBarOption, true);
          this.InOutDynamicsBarChart = InOutDynamicsBarChart;
        },

        // 吞吐状况一览 HuffConditionLine
        getHuffConditionLine() {
          let HuffConditionLineChart = echarts.init(document.getElementById('HuffConditionLine'));
          let HuffConditionLineOption = {
            color: ['#5383ec', '#67dbff', '#ab85db', '#aedee4'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              right: '4%',
              itemGap: 15,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: {
                color: '#fff'
              },
              data: this.HuffConditionData.name,
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24', '26', '28',
                '30'
              ],
            }],
            yAxis: [{
              type: 'value',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              splitLine: false,
              axisLabel: {
                color: '#fff'
              }
            }],
            series: [{
              name: this.HuffConditionData.name[0],
              type: 'line',
              // symbol: 'none',
              // smooth: true,
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.fdl
            }, {
              name: this.HuffConditionData.name[1],
              type: 'line',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.sfcy
            }, {
              name: this.HuffConditionData.name[2],
              type: 'line',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.jdl
            }, {
              name: this.HuffConditionData.name[3],
              type: 'line',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.zycy
            }]
          };
          HuffConditionLineChart.setOption(HuffConditionLineOption, true);
          this.HuffConditionLineChart = HuffConditionLineChart;
        },

        // 回单情况 ReturnOrderBar
        getReturnOrderBar() {
          let ReturnOrderBarChart = echarts.init(document.getElementById('ReturnOrderBar'));
          let ReturnOrderBarOption = {
            tooltip: {
              formatter: (x) => {
                return `${x.name}：${(x.value/10000).toFixed(1)}万件`
              },
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: this.ReturnOrderData.month,
            }],
            yAxis: [{
              type: 'value',
              axisLine: false,
              axisTick: false,
              splitLine: false,
              axisLabel: false,
            }],
            series: [{
              type: 'bar',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: this.barStyle.GradientColor,
                },
              },
              label: {
                show: true,
                position: 'top',
                offset: [-25, 25],
                rotate: 45,
                color: '#fff',
                formatter: (x) => {
                  return `${this.ReturnOrderData.value[x.dataIndex]}/${this.ReturnOrderData.valuePercent[x.dataIndex]}%`
                },
              },
              z: 2,
              data: this.ReturnOrderData.valuePercent
            }, {
              type: 'bar',
              barGap: '-100%',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: '#1a2631',
                },
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: (x) => {
                  return `${this.ReturnOrderData.valueTotal[x.dataIndex]}单`
                },
              },
              z: 1,
              data: [100, 100, 100]
            }]
          };
          ReturnOrderBarChart.setOption(ReturnOrderBarOption, true);
          this.ReturnOrderBarChart = ReturnOrderBarChart;
        },

        // 服务质量KPI KPIPie
        getKPIPie() {
          let KPIPieChart = echarts.init(document.getElementById('KPIPie'));
          let labelShow = {
            normal: {
              show: true,
              position: "center",
              formatter: "{c}%",
              textStyle: {
                fontSize: 14,
                color: "#ffffff"
              },
              padding: [-8, 0, 0]
            }
          },
          labelHide = {
            normal: {
              color: "#190c24"
            }
          },
          radius = window.screen.width > 1600 ? [35, 50] : [25, 30];
          let KPIPieOption = {
            color: ['#5383ec', '#190c24'],
            series: []
          };
          this.WarehouseManageKPI.forEach((x, i) => {            
            // let pos = i < 2 ? "10%" : i < 4 ? "35%" : i < 6 ? "60%" : "85%",
            // k = i % 2 == 0 ? 0 : 1;
            let pos = (10 + parseInt(i / 2) * 25) + "%",
              k = i % 2,  
              serries = {
              type: "pie",
              startAngle: 360,
              center: [25 + k * 50 + "%", pos],
              radius: radius,
              x: "0%",
              hoverAnimation: false,
              data: [
                {
                  name: x.name,
                  value: 100 - x.value,
                  label: {
                    show: true,
                    formatter: function(item) {
                      return x.data;
                    },
                    color: "#fff",
                    fontSize: window.screen.width > 1600 ? 13 : 11,
                    padding: window.screen.width > 1600 ? [135, 0, 0] : [90, 0, 0],
                    position: "center"
                  },
                  labelLine: {
                    normal: { show: false },
                    emphasis: { show: false }
                  },
                  itemStyle: labelHide
                },
                {
                  name: x.name,
                  value: x.value,
                  label: labelShow,
                  labelLine: { show: false }
                }
              ]
            };
            KPIPieOption.series.push(serries);
          });
          KPIPieChart.setOption(KPIPieOption, true);
          this.KPIPieChart = KPIPieChart;
        },

        getAllEcharts() {
          let self = this;
          window.onresize = function () {
            self.ProcessingOrderBarChart && self.ProcessingOrderBarChart.resize();
            self.DeliveryTimePieChart && self.DeliveryTimePieChart.resize();
            self.InOutDynamicsBarChart && self.InOutDynamicsBarChart.resize();
            self.HuffConditionLineChart && self.HuffConditionLineChart.resize();
            self.ReturnOrderBarChart && self.ReturnOrderBarChart.resize();
            self.KPIPieChart && self.KPIPieChart.resize();
          };
        },

        // 异常信息明细
        getTrunkData(val) {
          console.log(val);
          const self = this;
          let routetype = val;
          self.tabsnumber = val;
          let pageindex = 1;
          let pagesize = 50;

          axios.get("src/json/abnormal.json").then(function(rs) {
            // console.log(rs, 1)
            self.allAbnormal = rs.data.allDatas;
            self.freezing = rs.data.freezingDatas;
            self.refrigeration = rs.data.refrigerationDatas;
            self.temperature = rs.data.temperatureDatas;
            self.cool = rs.data.coolDatas;
            self.order = rs.data.orderDatas;
            self.device = rs.data.deviceDatas;
            self.interface = rs.data.interfaceDatas;

            if (!self.swiperLoaded) {
              self.$nextTick(function() { 
                console.log(123)
                new Swiper(".abnormal-swiper", {
                  loop: false,
                  slidesPerView: 4,
                  slidesPerGroup: 1,
                  autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                  },
                  direction: "vertical"
                });
              });
              self.swiperLoaded = true;
            }
          });
        },

        typeClass(type) {
          let className = "";

          switch (type) {
            case "冷冻仓异常":
              className = "typeClass1";
              break;
            case "冷藏仓异常":
              className = "typeClass2";
              break;
            case "在途温度异常":
              className = "typeClass3";
              break;
            case "阴凉异常":
              className = "typeClass4";
              break;
            case "订单异常":
              className = "typeClass5";
              break;
            case "设备异常":
              className = "typeClass6";
              break;
            case "接口异常":
              className = "typeClass7";
              break;
          }
          return className;
        }

      },
    })
  </script>
</body>

</html>